<template>
	<div class="mb-2">
		
		<div class="d-flex a-center" v-if="showTitle && title">
			<span style="width: 7px;height: 15px;" class=" mr-1 main-left-block-bg d-block rounded-top rounded-bottom">
			</span>
			<span :id="`offset${dataName}`" class="text-dark">{{title}}</span>
		</div>
		
		<div class="mt-2 position-relative">
			<el-row :gutter="0" class="bg-white">
			  <el-col :class="[item.isBig?'mouseEnterOut':'mouseLeaveOut',item.isBig?'z-15':'z-10']" :sm="12" :md="6" :lg="4" v-for="(item,index) in data" :key="index" class="position-relative d-flex a-center j-center" style="height: 200px;">
				  <a @click="clickItem(item)" style="text-decoration: none;color: #272a2d;width: 100%;position: relative;"  @mouseenter="isLastuse? lastuseMouseEnter(item):mouseEnter({dataName:dataName,index:index})" @mouseleave="isLastuse? lastuseMouseLeave(item):mouseLeave({dataName:dataName,index:index})">
					  <div class="d-flex flex-column j-center a-center  bg-white position-relative w-100" 
					  style="height: 200px;cursor: pointer;" >
							<div :class="item.isBig?'mouseEnterImg':'mouseLeaveImg'" >
								<img :src="item.cover" style="width: auto;height: 50px;"/>
							</div>
							<span  class="mt-3 text-center" :class="item.isBig?'mouseEnterName':'mouseLeaveName'" style="width: 150px;">{{item.name}}</span>
							<button v-if="item.button && item.isBig" style="bottom: 10px; cursor: pointer;border-radius: 2px;font-weight: 600;font-size: 16px;color: #fff;padding-top: 5px;padding-bottom: 5px;" 
							class=" px-2 border-0 main-button-bg-color mt-2 position-absolute"  @click.stop="openModel(item)">{{item.buttonData?item.buttonData:''}}</button>
							<!-- border-bottom-->
							<div style="height: 1px;background-color: #e5e5e5;" class="position-absolute w-100 z-5 left-0 right-0 bottom-0"></div>
					        
					  </div>
					  <!-- 中间线-->
					  <div v-if="index!==data.length-1" v-show="!item.isBig" style="width: 1px;top:50px; background-color: #e5e5e5;" class="z-5 right-0 h-50 position-absolute "></div>
				  </a>
			  </el-col>
			  <!-- 底边长线-->
			  <div style="height: 2px;" class="z-10 w-100 bottom-0 right-0 left-0 position-absolute bg-white"></div>
			  <!-- 右边长线-->
			  <div style="width: 2px;" class="z-10 top-0 right-0 position-absolute bg-white h-100"></div>
			  <!-- 左边贴边-->
			  <div style="width: 45px;" class="z-10 top-0 bottom-0 left-0 position-absolute bg-white h-100"></div>
			  <!-- 右边贴边-->
			  <div style="width: 45px;" class="z-10 right-0 bottom-0 top-0 position-absolute bg-white h-100"></div>
			  					
			</el-row>
		</div>
	</div>
</template>

<script>
	import {mapMutations,mapState,mapActions} from 'vuex'
	var storage = window.sessionStorage
	
	export default{
		inject:['app'],
		computed:{
			...mapState(['isIframe','lastuse'])
		},
		mounted() {
			this.getItemsHeight()
		},
	
		props:{
			data:{
				default:()=>[],
				type:Array
			},
			title:{
				default:()=>'暂无',
				type:String
			},
			
			dataName:{
				default:()=>'',
				type:String
			},
			
			showTitle:{
				default:()=>true,
				type:Boolean
			},
			isLastuse:{
				default:()=>false,
				type:Boolean
			},
			isFirst:{
				default:()=>false,
				type:Boolean
			}
		},
		
		methods:{
			getItemsHeight(){

				storage.removeItem("dataHeight");
				
				this.$nextTick(()=>{
					let item =$('#offset'+this.dataName)[0]
					 if(item){
					 	  let dataHeight = storage.getItem('dataHeight')?JSON.parse(storage.getItem('dataHeight')):[]							  
					 	  let index = dataHeight.findIndex(v=>{
					 		   return v.dataName===this.dataName
					 	  })
					 	  
					 	  index===-1?dataHeight.push({
					 		  offset:this.isFirst?0:item.offsetTop,
					 		  dataName:this.dataName,
					 		  
					 		  }):''
					 	  
					 	  storage.setItem('dataHeight',JSON.stringify(dataHeight))
					 }
				})
				
				
			},
			
			lastuseMouseEnter(item){

				item.isBig=true
			},
			lastuseMouseLeave(item){
				item.isBig=false
			},
			clickItem(item){
				
				
				item.isBig=false
				let bool = true
				if(item.button){
					bool=false
				}
				let token = storage.getItem('token')?storage.getItem('token'):0
				if(token){
					if(!item.button){
						this.$notify.info({
						          message: '即将跳转至'+item.name,
								  duration:1000
						});
						setTimeout(()=>{
							this.setItem({bool:bool,item:item})
							if(this.lastuse.length>0){
								
								let index = this.lastuse.findIndex(v=>{
									return v.name === item.name
								})
								if(index===-1){
									this.setLastuse(item)
								
								}else{
									this.clickSortLastuse({item:item,index:index})
								}
								
								return
							}
							
							this.setLastuse(item)
						},500)
					}
					
				}else{
					this.$message({
						message:'登录失效，请重新登录',
						type:'error'
					})
					setTimeout(()=>{
						location.href = 'http://180.76.96.39:90/?url=' + location.href
					},1000)
				}
				
				
			},
			...mapMutations(['mouseEnter','mouseLeave','setItem','setLastuse']),
			...mapActions(['clickSortLastuse']),
			openModel(item){
				if(item.type===1) return
				this.app.chooseData(item)
			}
		},
		
	}
</script>

<style>
	.mouseEnterOut{
		
		transform: scale(1.02);
		transition:all 0.2s ease-in-out;
		box-shadow: 0 4px 8px 0 hsla(209,9%,48%,.2);
		border-top: 4px solid #28c3c5;
	}
	
	.mouseLeaveOut{
		transform: scale(1);
		transition:all 0.2s ease-in-out;
		border-top:none;
		box-shadow:none;
	}
	.mouseEnterImg{
		transform: scale(1.1) translateY(-10px);
		transition:all 0.2s ease-in-out;
		
	}
	.mouseLeaveImg{
		transform: scale(1) translateY(10px);
		transition:all 0.2s ease-in-out;
	}
	
	.mouseEnterName{
		transform: scale(1.1) translateY(-5px);
		transition:all 0.2s ease-in-out;
	}
	.mouseLeaveName{
		transform: scale(1) translateY(5px);
		transition:all 0.2s ease-in-out;
	}
</style>
